<style></style>
<template>
  <div>
    <div class="i-layout-page-header">
      <i-page-header title="公告列表"></i-page-header>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="formValidate" :model="formValidate">
        <Row type="flex" :gutter="24">
          <Col span="5">
            <FormItem label="是否显示：" label-for="is_show">
              <Select
                v-model="formValidate.is_show"
                placeholder="请选择"
                clearable
                @on-change="getSearch"
              >
                <Option value="1">显示</Option>
                <Option value="0">不显示</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="标题：" label-for="keyword">
              <Input
                search
                enter-button
                placeholder="请输入标题"
                v-model="formValidate.keyword"
                @on-search="getSearch"
              />
            </FormItem>
          </Col>
        </Row>
        <Row type="flex">
          <Col span="8">
            <Button type="primary" icon="md-add" @click="newsAdd" class="mr20"
              >添加公告</Button
            >
          </Col>
        </Row>
      </Form>
      <vxe-table
        :border="false"
        class="vxeTable mt25"
        highlight-hover-row
        highlight-current-row
        :loading="loading"
        ref="xTable"
        header-row-class-name="false"
        :tree-config="{ children: 'children', expandAll: true }"
        :data="newsData"
      >
        <vxe-table-column
          field="id"
          title="ID"
          tooltip
          min-width="20"
        ></vxe-table-column>
        <vxe-table-column
          field="cate_title"
          tree-node
          title="分类"
          min-width="150"
        ></vxe-table-column>
        <vxe-table-column field="icon" title="图标" min-width="80">
          <template v-slot="{ row }">
            <div v-if="row.img == ''" class="img-logo"></div>
            <el-image
              v-else
              fit="cover"
              v-image-preview
              style="cursor: pointer; width: 60px"
              :src="row.img"
              v-lazy="row.img"
            />
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="title"
          tree-node
          title="标题"
          min-width="150"
        ></vxe-table-column>
        <vxe-table-column
          field="stitle"
          tree-node
          title="简介"
          min-width="150"
        ></vxe-table-column>
        <vxe-table-column
          field="one_time"
          align="center"
          title="日期"
          min-width="150"
        ></vxe-table-column>
        <vxe-table-column field="is_show" title="状态" min-width="50">
          <template v-slot="{ row }">
            <i-switch
              v-model="row.is_show"
              :value="row.is_show"
              :true-value="1"
              :false-value="0"
              @on-change="onChangeIsShow(row)"
              size="large"
            >
              <span slot="open">显示</span>
              <span slot="close">隐藏</span>
            </i-switch>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="action"
          title="操作"
          min-width="150"
          fixed="right"
        >
          <template v-slot="{ row, index }">
            <a @click="newsEdit(row.id)">编辑</a>
            <Divider type="vertical" />
            <a @click="newsDel(row, '删除新闻', index)">删除</a>
          </template>
        </vxe-table-column>
      </vxe-table>
    </Card>
    <div class="acea-row row-right page">
      <Page
        :total="page.pageCount"
        show-elevator
        show-total
        @on-change="tapPage"
        :page-size="page.pageSize"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import VueUeditorWrap from 'vue-ueditor-wrap'
import IPageHeader from '../../../layouts/system/page-header/index'
import UiUpload from '@/ui/upload/index'
import util from '../../../libs/util'
import {
  SystemNewsCateTree,
  SystemNews,
  SystemNewsSave,
  SystemNewsItem,
  SystemNewsDel,
  SystemNewsShowSet,
} from '../../../api/system/news'
import Setting from '../../../setting'
export default {
  name: 'notice',
  components: {
    IPageHeader,
    UiUpload,
    VueUeditorWrap,
  },
  data() {
    return {
      // 新
      loading: false,
      newsData: [],
      upUrl: '',
      upHeaders: {},
      // 搜索区域
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      formValidate: {
        is_show: '',
        keyword: '',
        pid: 0,
      },
      page: {
        pageCount: 0, // 一共多少数量
        pageSize: 0, // 每一页码数量
        page: 1, // 当前页码
      },
      cateAr: [],
    }
  },
  created() {
    this.initView()
  },
  methods: {
    initView: function () {
      this.getNews()
    },
    /**
     * 新闻列表
     */
    getNews() {
      this.loading = true
      this.formValidate.is_show = this.formValidate.is_show || ''

      var data = {
        keyword: this.formValidate.keyword,
        is_show: this.formValidate.is_show,
        pid: 1,
        page: this.page.page,
      }
      SystemNews(data)
        .then((res) => {
          if (res.code == 200) {
            this.newsData = res.data.data
            this.loading = false
            this.page.pageSize = res.data.pageSize
            this.page.pageCount = res.data.pageCount
          } else {
            this.loading = false
            this.$alert(res.msg)
          }
        })
        .catch((res) => {
          console.log(res)
          this.loading = false
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    // 表格搜索
    getSearch() {
      this.getNews()
    },
    // 修改是否显示
    onChangeIsShow(row) {
      let data = {
        id: row.id,
        is_show: row.is_show,
      }
      SystemNewsShowSet(data)
        .then(async (res) => {
          this.$Message.success(res.msg)
        })
        .catch((res) => {
          this.$Message.error(res.msg)
        })
    },
    /**
     * 分页
     */
    tapPage: function (index) {
      this.page.page = index
      this.getNews()
    },
    /**
     * 添加新闻
     */
    newsAdd() {
      this.$router.push('/system/news/notice_add?cate_id=1&title=添加公告')
    },
    /**
     * 编辑
     * @param {Object} row
     */
    newsEdit(id) {
      this.$router.push(
        '/system/news/notice_add?id=' + id + '&cate_id=1&title=编辑公告'
      )
    },
    // 删除
    newsDel(row, tit, num) {
      this.$confirm('此操作将永久删除该新闻, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$utils.loading(this, '删除数据中...')
        SystemNewsDel({ id: row.id })
          .then((res) => {
            this.$utils.loadingClose()
            this.loading = true
            if (res.code == 200) {
              this.getNews()
            } else {
              this.$alert(res.msg)
            }
          })
          .catch((err) => {
            console.log(err)
            this.$utils.loadingClose()
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          })
      })
    },
  },
}
</script>
